<template>
  <li :class="['listItem', 'flex-row', uistate.chatid === chatid && 'active', chat.isTop===2 && 'alway-top']"
    @click="click(chat)">
    <slot name="checkbox"></slot>
    <div class="listItemAvatar">
      <img :src="chat.src||chat.avatar||defaultAvatar" alt="" style="width:100%">
      <span class="no-read-cnt" v-if="chat.noReadCnt&&chat.showstatus === 0">{{chat.noReadCnt>999?'999+':chat.noReadCnt}}</span>
      <span v-else-if="chat.noReadCnt" class="no-read-cnt disabled" />
    </div>
    
    <div class="listItemInfo flex-column">
      <div class="listItemTopInfo flex-row">
          <div :class="['listItemName', 'textEllipsis','flex-row',
            showGender && chat.gender == 1 ? 'male' : chat.gender == 0 ? 'female' : '' ]">
            <span class="textEllipsis" style="padding-right:5px">{{chat.friendNick||chat.friendnick||chat.friendremark||'群聊天'}}</span>
            <span class="layui-badge layui-bg-blue" v-if="chat.isTop == 2 ">VIP</span>
          </div>
      </div>
      <div class="listItemBottomInfo flex-row fontGrey">
        <div class="textEllipsis" style="line-height:18px" v-if="showLastMessage">
          {{ content }}
        </div>
        <slot name="bottomInfo"></slot>
      </div>
    </div>
    <slot name="attachInfo"></slot>
  </li>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import wechatMessageType from '@/lib/wechat-message-type'

export default {
  name: 'chatListItem',
  props: ['chatid', 'showLastMessage', 'showBadge', 'showGender','chat'],
  
  computed:{
    ...mapState(['uistate']),
    content(){
      let message,lastContent
      try {
        message = JSON.parse(this.chat.content)  
      } catch (error) {
        message = { content:this.chat.content,msgtype:1 }
      }
      lastContent = '['+(wechatMessageType[message.msgtype]||{}).text+']'
      
        
      switch(message.msgtype){
        case 1:
          lastContent = message.content
          break;
      }
      if(this.chat.friendwxid.indexOf('@chatroom')>-1 && this.chat.realFromNick!==null){
        if(this.chat.realFromNick && lastContent)
          lastContent = this.chat.realFromNick+'：'+lastContent
      }
      return lastContent
    }
  },

  methods: {
    ...mapMutations(['updateUIState']),
    click(item){
      this.updateUIState({chatid:this.chatid})
      this.$emit('click', item);
    },
    
  }
}
</script>
<style scoped>
.listItem{
  outline:none
}
.alway-top{
  background-color: #f1f1f1
}
.listItem:focus{
  background: #ccc !important;
}
.listItemName{
  margin-bottom: 0;
  padding-right:0
}
.listItemAvatar{
  position: relative;
  background-color: #cccccc;
  border-radius: 3px;
}
.listItemAvatar img{
  object-fit: cover;
  border-radius: 3px;
  width: 40px;
  height: 40px;

}
.no-read-cnt{
  position: absolute;
  display: inline-block;
  padding: 0 6px;
  font-size: 12px;
  text-align: center;
  background-color: #FF5722;
  color: #fff;
  right: -10px;
  height: 16px;
  line-height: 16px;
  border-radius: 8px;
  top: -4px;
}
.no-read-cnt.disabled{
  padding: 0;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  top:-3px;
  right: -3px;
}
</style>